<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        .result-box {
            position: relative;
            overflow: hidden;
            height: 230px;
            background-image: url(../../image/course/read_bg.png);
            background-size: 100% 215px;
            background-repeat: no-repeat;
        }

        .bottom-shape {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 15px;
            background-color: #fff;
            border-radius: 10px 10px 0px 0px;
        }

        .score-content {
            position: absolute;
            top: 30px;
            left: 50%;
            width: 275px;
            height: 190px;
            transform: translateX(-50%);
        }

        .score-content .text {
            padding-top: 16px;
        }

        .score-content .text img {
            width: 6px;
            height: 6px;
        }

        .score-content .text span {
            color: #222224;
            font-size: 12px;
            margin: 0 6px;
        }

        .score-content .score {
            margin-top: 12px;
            font-size: 45px;
            text-align: center;
            font-weight: bolder;
            line-height: 49px;
        }

        .label-box {
            margin: 10px auto;
            width: 148px;
        }

        .label-box div {
            font-size: 12px;
        }

        .label-box div p {
            width: 5px;
            height: 5px;
            border-radius: 50%;
        }

        .listen-my {
            margin: 15px auto;
            width: 137px;
            height: 34px;
            text-align: center;
            line-height: 34px;
            color: #7C4500;
            font-size: 16px;
            background: url(../../image/course/yellow_bg.png) no-repeat;
            background-size: 137px 34px;
        }

        .item {
            padding: 0 15px;
        }

        .item .left img {
            padding: 15px 0;
            box-sizing: content-box;
            width: 25px;
            height: 25px;
            margin-right: 12px;
        }

        .item .right {
            position: relative;
            padding: 15px 0;
        }

        .item .right::after {
            content: ' ';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            transform: scaleY(0.5);
            background-color: #D4D4D4;
        }

        .item .right .words,
        .item .right .words span {
            color: #191919;
            font-size: 16px;
        }

        .word-img {
            display: block;
            width: 100%;
            height: auto;
            margin-bottom: 15px;
            border-radius: 6px;
        }

        .word-action {
            margin-top: 10px;
            background-color: #FFF9E8;
            border-radius: 10px;
            padding: 15px 0;
        }

        .word-action div {
            overflow: initial !important;
        }

        .word-action img {
            margin-right: 8px;
            width: 30px;
            height: 30px;
            box-shadow: 0px 3px 8px 0px rgba(253, 155, 67, 0.7);
            border-radius: 50%;
        }

        .word-action p {
            color: #191919;
            font-size: 13px;
            line-height: 24px;
        }

        .word-action p.score {
            color: #FD9B43;
            font-weight: bolder;
            font-size: 25px;
            margin-right: 8px;
        }

        .submite {
            margin: 38px auto;
            width: 211px;
            text-align: center;
            line-height: 46px;
            height: 46px;
            color: #fff;
            font-size: 18px;
            font-weight: bolder;
            background: url(../../image/course/blue_btn.png) no-repeat;
            background-size: 100% 100%;
        }

        .words-voice {
            width: 16px;
            height: 16px;
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div v-if="info.score" class="result-box blue-bg">
            <div class="score-content">
                <p class="text" data-flex="main:center cross:center">
                    <img src="../../image/course/read_icon.png" alt="">
                    <span>最终得分</span>
                    <img src="../../image/course/read_icon.png" alt="">
                </p>
                <p class="orange score">{{info.score}}</p>
                <div class="label-box" data-flex="main:center">
                    <div v-if="info.score > great" class="orange" data-flex="cross:center">
                        <p class="orange-b"></p>
                        &nbsp;&nbsp;真棒
                    </div>
                    <div v-else-if="info.score > notBad" class="green" data-flex="cross:center">
                        <p class="green-b"></p>
                        &nbsp;&nbsp;不错
                    </div>
                    <div v-else class="red" data-flex="cross:center">
                        <p class="red-b"></p>
                        &nbsp;&nbsp;加油
                    </div>
                </div>
                <div onclick="handleListenAll()" class="listen-my">听听我的发音</div>
            </div>
            <div class="bottom-shape"></div>
        </div>
        <div class="item" data-flex="box:first" @click="handleItem(index)" v-for="item,index in listData">
            <div class="left">
                <!-- <img v-if="item.status == 1" src="../../image/course/record.png" alt="">
                <img v-else src="../../image/course/no_record.png" alt=""> -->
            </div>
            <div class="right">
                <img class="word-img" v-if="item.questionPicUrl" :src="item.questionPicUrl" alt="">
                <div @click="handlePlayWord(index, 2)" class="words'" data-flex="cross:center">
                    <span style="word-break: normal;" v-html="item.words" :class="'words-box-'+ index"></span>
                    <img data-flex-box="0" class="words-voice" src="../../image/course/detail_voice.png" alt="">
                </div>
                <div class="word-action" v-if="wordIndex == index" data-flex="box:mean">
                    <div @click="handleRecordWord(index)" data-flex="main:center cross:center">
                        <img :src="isRecord ? '../../image/course/sent_record.gif' : '../../image/ui/record_read.png'"
                            alt="">
                        <p>录音</p>
                    </div>
                    <div @click="handlePlayWord(index, 1)" data-flex="main:center cross:center">
                        <img :src="item.playType == 1 && isPlay ? '../../image/course/pause.png' : '../../image/course/play2.png'"
                            alt="">
                        <p>播放录音</p>
                    </div>
                    <div data-flex="main:center cross:center">
                        <p class="score">{{item.score || item.stuAnswerResultDetailScoreValue || 0}}</p>
                        <p>得分</p>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="!info.score" onclick="handleSubmite()" class="submite">完成</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/audio.js"></script>
<script type="text/javascript" src="../../script/recordScore.js"></script>
<script type="text/javascript" src="../../script/question/data_parse.js"></script>
<script type="text/javascript" src="../../script/saveFiles.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var pageParam = {};
    var playIndex = -1;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;

        fnInit();
        // 初始化保存s
        initSaveFile();
        // 初始化录音引擎
        initEngine();
        // 初始化播放器
        Audio.init();
        addAudioEvent();
        // 页面消失，停止录音
        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            // 停止录音
            fnStopRecord();
            // 停止播放
            Audio.pause();
            // 移除监听事件
            Audio.removeEventListener();
        });
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                great: 70,
                notBad: 30,
                bad: 0,
                info: {
                    id: pageParam.id,
                    score: pageParam.score,
                    code: pageParam.questionTypeCode
                },
                playList: [],
                listData: [],
                wordIndex: -1,
                isPlay: false,
                isRecord: false
            },
            watch: {
                wordIndex: function (val) {
                    var item = vm.listData[val];
                    // questionAudioUrl
                    // 播放原音
                    handlePlayWord(val, 2);
                }
            }
        });
        getPageData();
    }

    // 再做一次
    function handleDoAgin() {
        vm.info = {
            id: pageParam.id,
            score: '',
            code: pageParam.code
        };
        api.execScript({
            name: api.winName,
            script: 'fnSetBtnInfo("", "", false);'
        });
    }

    // 听听我的发音
    function handleListenAll() {
        if (vm.playList.length > 0) {
            playIndex = 0;
            // vm.wordIndex = playIndex;
            vm.isPlay = true;
            Audio.setListLoop(true);
            Audio.setListAndPlay(vm.playList);
        } else {
            fnToast('请先录音');
        }
    }

    // 录音完成回调
    function recordCallback(data) {
        var url = data.url, // 云端地址
            local = data.localPath, // 本地录音文件
            score = data.score, // 句子得分
            details = data.details; // 单词得分明细
        var list = deepCopy(vm.listData),
            item = list[vm.wordIndex];
        vm.isRecord = false;

        if (item.isRecord) {
            item.recordUrl = 'fs:/' + local;
            item.score = score;
            item.detail = details;
            item.status = '1';
            item.isRecord = false;
            vm.listData = list;
            insertWordScore(vm.wordIndex, details);
            submiteOne(vm.wordIndex, local, details);
        }
    }
    function insertWordScore(index, list) {
        var box = $('.words-box-' + index),
            item = vm.listData[index];
        var words = item.words.split(' ');
        var result = [];

        console.log(JSON.stringify(list));
        console.log(words);

        for (var i = 0; i < list.length; i++) {
            result.push(oneWord(list[i], words[i]));
        }
        box.html('');
        result = result.join('&nbsp;');
        // result += '<img class="words-voice" src="../../image/course/detail_voice.png" alt="">';
        box.html(result);
    }
    // 以一个单词
    function oneWord(sender, char) {
        var one = '<span class="';
        var className = ' red';
        if (sender.score > vm.great) {
            className = ' green';
        } else if (sender.score > vm.notBad) {
            className = ' orange';
        }
        console.log(sender.score + '==' + className);
        one += className + '">';
        one += char + '</span>';
        if (!char) one = '';
        return one;
    }
    // 录音动作
    function handleRecordWord(index) {


        if (vm.info.score) {
            // 回看答题记录
            fnToast('当前不能录音');
            return;
        }
        var list = deepCopy(vm.listData),
            item = list[index];
        if (vm.isPlay) {
            // fnToast('音频播放中');
            // return;
            Audio.pause();
        }
        if (vm.isRecord) {
            // 暂停录音
            fnStopRecord();
            vm.isRecord = false;
        } else {
            // 开始录音
            vm.isRecord = true;
            fnSentRecordIdentify(item.words, recordCallback);
            item.isRecord = true;
        }
        vm.listData = list;
    }

    // 播放动作
    // type 1 录音播放 2 原音播发
    function handlePlayWord(index, type) {
        var list = deepCopy(vm.listData),
            item = list[index];
        if (item.score === undefined && !item.stuAnswerResultDetailScoreValue && type == 1) {
            fnToast('请先录音');
            return;
        }
        // 暂停
        // 暂停后 playIndex = -1，无法继续播放
        if (playIndex == index && item.playType == type) {
            Audio.pause();
            playIndex = -1;
            vm.isPlay = false;
        } else {
            playIndex = index;
            var src = type == 1 ? item.recordUrl : item.questionAudioUrl;
            Audio.setListAndPlay([{ src: src }], 0, 0);
            vm.isPlay = true;
        }
        item.playType = type;
        vm.listData = list;
    }

    // 切换响应item
    function handleItem(index) {
        if (index == vm.wordIndex) return;
        if (vm.isRecord) {
            // 停止录音
            fnStopRecord();
            vm.isRecord = false;
        }
        if (vm.isPlay) {
            // 停止播放
            Audio.pause();
            playIndex = -1;
            vm.isPlay = false;
        }
        vm.wordIndex = index;
    }

    // 音频播放事件回调
    function addAudioEvent() {
        var eventCallback = function (eventType, _playIndex) {
            if (eventType == 0) {
                // 一个音频播放结束
                vm.isPlay = false;
                playIndex = -1;
                Audio.setListLoop(false);
            } else if (eventType == 3) {
                // 播放下一个
                playIndex++;
                // vm.wordIndex = playIndex;
            }
        };
        var progressCallback = function (progress) {
            // 暂时不需要
        };
        Audio.addEvent(eventCallback, progressCallback);
    }

    // 提交
    function handleSubmite() {
        if (isSubmiteQuestionList(vm.listData)) {
            var url = 'question/catalogOverAnswer';
            var params = {
                catalogId: pageParam.id,
                questionTypeCode: pageParam.code
            };
            var callback = function (data) {
                var score = data.a;
                fnToast('提交成功');
                api.execScript({
                    name: pageParam.winName,
                    frameName: pageParam.frameName,
                    script: 'getPageData()'
                });
                fnDelayCloseWin(1000 * 1.5)
            };
            POST(url, params, callback);
        } else {
            fnToast('全部完成才能提交哦~');
        }
    }

    // 获取页面数据
    function getPageData() {
        var url = 'question/findQuestionList';
        var params = {
            id: pageParam.id,
            questionTypeCode: pageParam.code
        };
        var callback = function (data) {
            var listData = formateQAData(data.listData);
            var playList = [];
            for (var i = 0; i < listData.length; i++) {
                var item = listData[i];
                if (item.stuAnswerResultDetailId) {
                    var src = getIsSave(item.stuAnswerResultDetailId);
                    src = 'fs:/' + (src || '')
                    item.recordUrl = src;
                    item.doStatus = 1;
                    var temp = {
                        src: src
                    };
                    playList.push(temp);
                }
            }
            vm.playList = playList;
            vm.listData = listData;
            if (vm.info.score === '') {
                vm.wordIndex = 0;
            }
            vm.$nextTick(function () {
                for (var i = 0; i < listData.length; i++) {
                    var item = listData[i];
                    if (item.stuAnswerResultDetailId) {
                        var details = api.getPrefs({ key: item.stuAnswerResultDetailId, sync: true });
                        insertWordScore(i, JSON.parse(details))
                    }
                }
            })
            // status 为200时,只返回data
        };
        POST(url, params, callback);
    }

    // 提交一个题
    function submiteOne(index, path, details) {
        var _path = path + '';
        var item = vm.listData[index];
        var url = 'question/compareAnswer';
        var params = {
            otherInfo: '',
            frontScore: item.score,
            answerStartTime: new Date().getTime(),
            fillAnswerStr: '',
            id: item.id
        };
        var callback = function (data) {
            var list = deepCopy(vm.listData);
            list[index].doStatus = data.judgeRight ? '1' : '2';

            vm.listData = list;
            // var item = vm.listData[index];
            // item.doStatus = data.judgeRight ? '1' : '2';
            saveFileById(data.answerRightOrErrorId, _path);
            api.setPrefs({
                key: data.answerRightOrErrorId,
                value: JSON.stringify(details)
            });
        };
        POST(url, params, callback);
    }
</script>

</html>